<template>
	<view class="" :style="$theme.pageStyle">
		<view class="header">
			<image class="header-img"
				src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/151713149535MmHovS.png" mode=""></image>
			<image class="header-img-1"
				src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/331713149013C4RyPZ.png" mode=""></image>
		</view>
		<view class="content">
			<p class="title">{{Data.title}}</p>
			<view class="info flex flex-space-between flex-align-center">
				<p class="date">
					{{Data.create_time}}
				</p>
				<p class="num flex-1" style="margin-left: 15px;">
					{{Data.click_actual}}浏览
				</p>
				<view>
					<p class="type"># {{Cate.name}}</p>
				</view>
			</view>
			<view class="author-wr">
				<view class="author flex position-relative flex-space-between flex-align-center">
					<view class="position-relative mg-r-12">
						<image class="avatar" :src="authorInfo.avatar" mode=""></image>
					</view>
					<view class="flex-1">
						<view class="name">
							{{authorInfo.real_name}} <span class="city">{{authorInfo.city}}</span>
						</view>
						<view class="firm">
							<span class="text-tag">
								官方认证
							</span>
						</view>
					</view>
					<view class="btn flex flex-space-center flex-align-center" @click="ToUrl('/pages/lawyer/info?id=' + authorInfo.id )">
						在线咨询
					</view>
				</view>
				<view class="author-2 flex flex-align-center">
					<span class="text-tag2">
						律师答疑
					</span>
					<span>如你有法律问题，可直接咨询律师</span>
				</view>
			</view>

			<view class="content-start">
				<image src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/071713151987VlU6hk.png" mode="">
				</image>
			</view>
			<view class="content-container">
				<u-read-more ref="uReadMoreRef">
					<u-parse :content="Data.content" @load="load"></u-parse>
				</u-read-more>
			</view>
			<view class="text-line-other flex-align-center flex flex-space-center">
				<image class="img"
					src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/5517131531757ByHwM.png" mode="">
				</image>
				<span class="text">
					看完文章
					<span class="color-text">仍有疑问 ? </span>
					推荐咨询下方专业律师
				</span>
			</view>
			
			<view class="mlr-gap3 mt-gap3" @click="ToUrl('/pages/lawyer/index')">
				<view class="capsule-consult-card">
					<view class="tit fb" style="display: flex;">问题<b>没解决？</b>试试问律师吧~</view>
					<view class="disc mt-gap">精选本地好评律师，为您提供1对1专业解答</view>
					<view class="ask mt-gap4">
						<i class="vm smails"></i>立即问律师<i class="vm arrow ml-gap"></i>
					</view>
				</view>
			</view>
			
			
		</view>
		
		
		<view class="recommend">
			<view class="title">
				平台精选 普法文章
			</view>
			<block v-for="(item,index) in Article" :key="index">
				<view class="articles-item" @click="ToUrl('/article/index/detail?id=' + item.id )">
					<view class="essay-item">
						<view class="title van-ellipsis">
							{{item.title}}
						</view>
						<view class="essay-item-container flex">
							<view class="contents flex-1">
								<view class="">
									<view class="detail text-ellipsis-2">
										{{item.abstract}}
									</view>
								</view>
								<view class="info flex flex-space-between flex-align-center">
									<view class="flex flex-1">
										<view class="tag">
											# {{item.category.name}}
										</view>
										<view class="number-of-read flex flex-align-center">
											<p class="text">{{item.click_actual}}浏览</p>
										</view>
									</view>
									<p class="date">{{item.create_time}}</p>
								</view>
							</view>
							<view>
								<image class="logo" :src="item.images" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		
		
		
		<view style="height: 50px;">
			
		</view>
		
		<view class="btns">
			<view class="author flex position-relative flex-space-between flex-align-center">
				<image class="avatar" :src="authorInfo.avatar" mode=""></image>
				<view class="flex-1">
					<span class="name">咨询 {{authorInfo.real_name}}律师</span>
					<view class="firm">专业高效,未服务可退</view>
				</view>
				<view class="btn flex flex-space-center flex-align-center" @click="ToUrl('/pages/lawyer/info?id=' + authorInfo.id )">
					在线咨询
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import $H from '@/common/js/request.js';

	export default {
		data() {
			return {
				id: '',
				scrollTop: 0,
				Article: [],
				Data: {},
				Cate: {},
				authorInfo: {},
				content: ''
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(opt) {
			this.id = opt.id
			this.GetData()
		},
		methods: {
			ToUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
			ToIndex() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			load() {
				this.$refs.uReadMoreRef.init();
			},
			async GetData() {
				try {
					const res = await $H.post('article/info', {
						id: this.id
					}, {
						token: true
					});
					this.Data = res.data
					this.Cate = res.data.category
					this.authorInfo = res.data.authorInfo
					this.Article = res.data.article
				} catch (error) {
					console.error('Error fetching IndexData:', error);
				} finally {
					uni.hideLoading();
				}
			},
		}
	}
</script>



<style lang="scss" scoped>
	.header {
		background: #fff;
	}

	.header .header-img {
		display: block;
		width: 100%;
		height: 88px;
	}

	.header .header-img-1 {
		width: 280px;
		height: 25px;
		margin-left: 18px;
	}

	.content {
		min-height: 100vh;
		background: #fff;
		padding-top: 17px;
		padding-bottom: 26px;
		border-radius: 0 0 15px 15px;
	}

	.content .title {
		font-size: 18px;
		padding: 0 15px;
		font-weight: 500;
		background: #fff;
		color: #333;
	}

	.content .info {
		padding: 10px 15px 10px;
	}

	.flex-align-center {
		align-items: center;
	}

	.flex-space-between {
		justify-content: space-between;
	}

	.flex {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
	}

	.content .content-law-line,
	.content .info .date,
	.content .info .num {
		font-size: 14px;
		font-weight: 400;
		color: #999;
	}

	.content .info .type {
		font-size: 14px;
		font-weight: 400;
		color: var(--color-primary);
	}

	.content .author-wr {
		padding: 15px;
		background: #f5f5f7;
		border-radius: 8px;
		margin: 15px;
		box-sizing: border-box;
	}

	.content .author {
		box-sizing: border-box;
		border-bottom: 1px solid #e9e9e9;
		padding-bottom: 10px;
	}

	.position-relative {
		position: relative;
		z-index: 0;
	}

	.mg-r-12 {
		margin-right: 15px;
	}

	.content .author .avatar {
		width: 45px;
		height: 45px;
		border-radius: 8px;
		display: block;
	}

	.flex-1 {
		flex: 1;
	}

	.content .author .name {
		font-size: 16px;
		font-weight: 500;
		color: #333;
		line-height: 20px;
		margin-bottom: 5px;
	}

	.content .author .name .city {
		font-size: 12px;
		font-weight: 400;
		color: #999;
		margin-left: 10px;
	}

	.content .author .firm {
		line-height: 0;
	}

	.content .author .firm .text-tag {
		line-height: 18px;
		font-size: 12px;
		font-weight: 400;
		color: #bd934c;
		border: .5px solid #bd934c;
		border-radius: 2px;
		background: #fff8ec;
		padding: 0 5px;
	}

	.content .author .btn {
		width: 95px;
		text-align: center;
		line-height: 35px;
		background: var(--color-primary);
		border-radius: 25px;
		font-size: 14px;
		font-weight: 500;
		color: #fff;
	}

	.flex-space-center {
		justify-content: center;
	}

	.content .author-2 {
		margin-top: 10px;
		font-size: 12px;
		font-weight: 400;
		color: #999;
	}

	.content .author-2 .text-tag2 {
		display: inline-block;
		width: 60px;
		height: 20px;
		background: #8791a3;
		border-radius: 4px;
		text-align: center;
		line-height: 20px;
		color: #fff;
		margin-right: 10px;
	}

	.content-start {
		margin: 15px;

		image {
			width: 100%;
			height: 30px;
		}
	}

	.content-container {
		margin: 15px;
	}

	.content .text-line-other {
		margin: 17px 0;
		font-size: 14px;
		font-weight: 400;
		color: #999;
	}

	.content .text-line-other .img {
		width: 17px;
		height: 17px;
	}

	.content .text-line-other .text {
		margin: 0 5px;
	}

	.content .color-text {
		color: var(--color-primary);
	}

	.recommend {
		margin: 15px;
		padding-bottom: 50px;
	}

	.recommend .title {
		font-size: 18px;
		font-weight: 600;
		color: #333;
		padding: .42667rem;
	}
	
	//文章列表
	.articles-item {
		width: 100%;
		margin: 10px auto 0;
		overflow: hidden;
		padding-bottom: 10px;
		border-radius: 8px;
		// border-bottom: 1px #f1f1f1 solid;
	}
	
	.essay-item {
		background: #fff;
		padding: 10px;
	}
	
	.essay-item .title {
		font-size: 18px;
		font-weight: 500;
		color: #333;
	}
	
	.van-ellipsis {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.essay-item-container {
		padding: 5px 0;
	}
	
	.essay-item .essay-item-container .contents {
		overflow: hidden;
	}
	
	.flex-1 {
		flex: 1;
	}
	
	.essay-item .essay-item-container .contents .detail {
		margin-bottom: 10px;
		font-size: 14px;
		font-weight: 400;
		color: #666;
		height: 40px;
	}
	
	.text-ellipsis-2 {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		word-wrap: break-word;
		word-break: break-all;
	}
	
	.flex-align-center {
		align-items: center;
	}
	
	.flex-space-between {
		justify-content: space-between;
	}
	
	.essay-item .essay-item-container .contents .info .tag {
		font-size: 14px;
		font-weight: 400;
		color: var(--color-primary);
	}
	
	.essay-item .essay-item-container .contents .info .number-of-read {
		padding-left: 10px;
	}
	
	.essay-item .essay-item-container .contents .info .number-of-read .text {
		font-size: 14px;
		font-weight: 400;
		color: #999;
	}
	
	.essay-item .essay-item-container .contents .info .date {
		font-size: 14px;
		line-height: 16px;
		font-weight: 400;
		color: #999;
	}
	
	.essay-item .essay-item-container .logo {
		width: 100px;
		height: 60px;
		border-radius: 8px;
		overflow: hidden;
		display: block;
		margin-left: 14px;
	}
	
	
	
	.btns{
	    background: #fff;
	    padding: 15px;
	    position: fixed;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    width: 100%;
	    border-radius: 15px 15px 0 0;
	    z-index: 99;
	}
	
	.btns .author{
	    padding-bottom: 15px;
	}
	
	.btns .author .avatar{
	    width: 45px;
	    height:  45px;
	    border-radius: 50%;
	    margin-right:15px ;
	}
	
	.btns .author, .btns {
	    box-sizing: border-box;
	}
	
	.btns .author .name{
	    font-size: 16px;
	    font-weight: 600;
	    color: #333;
	}
	
	.btns .author .firm{
	    font-size: 14px;
	    font-weight: 400;
	    color: #999;
	    margin-top: 5px;
	}
	
	.btns .author .btn{
	    width: 140px;
	    text-align: center;
	    line-height: 40px;
	    background: var(--color-primary);
	    border-radius: 18px;
	    font-size: 14px;
	    font-weight: 500;
	    color: #fff;
	}
	
	
	.mlr-gap3 {
		margin-right: 10px;
		margin-left: 10px;
	}
	
	.mt-gap3 {
		margin-top: 10px;
	}
	
	.capsule-consult-card {
		padding: 17px 13px 0 13px;
		display: block;
		height: 132px;
		background: url('https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/0017131125608ARsV5.png') center center #fff no-repeat;
		background-size: 100% 100%;
		border-radius: 8px;
		overflow: hidden;
		border: 2px solid #fff;
	}
	
	.capsule-consult-card .tit {
		font-size: 18px;
		line-height: 22px;
	}
	
	.capsule-consult-card .tit b {
		color: #DB642A;
	}
	
	.fb {
		font-weight: 700;
	}
	
	.capsule-consult-card .disc {
		font-size: 12px;
		line-height: 25px;
		color: #676F85;
	}
	
	.capsule-consult-card .ask {
		display: inline-block;
		padding: 0 15px 0 15px;
		height: 22px;
		line-height: 22px;
		background-color: #0EB298;
		border-radius: 10px;
		font-size: 12px;
		color: #fff;
		font-weight: bold;
	}
	
	.mt-gap4 {
		margin-top: 10px;
	}
	
	
</style>